色彩 | 你离用好可视化配色，还要踩几次坑？

一个精心设计的可视化配色能充分发挥人脑对色彩与生俱来的高效处理能力，帮助读者更快更好地从可视化中获取有意义的信息；相反，糟糕的配色会阻碍读者对信息的理解，让你的可视化更难懂，可能还不如不用。

这大概也是为什么著名的信息设计专家爱德华·塔夫特（Edward Tufte）会将“不祸害”（"Do no harm"）作为可视化颜色使用的第一原则。下面让我们来康康，要做到这一点，我们要避开哪些坑吧~


▼

本文涵盖了来自 AntV、ECharts、帆软、Datawrapper、Chartio 等知名团队与个人的数十篇文章，和数本可视化书籍的观点及资料（小小声说句全网最全）

大致分为两类：视觉感知 & 设计原则

限于篇幅，这次我们主要的目标是先把最有代表性的坑都给找出来，谁能想到光是配色就有这么多坑呢 ......

再多的坑，我们一个 一个 一个 一个 一个 一个 一个 一个 一个 一个帮你踩~

P.S. 为避免背景色影响配图显示效果，建议使用浅色模式阅读。

---

1
高饱和度配色闪瞎眼

过于鲜艳的配色会使图表的视觉负担过重，并且让人难以找到其他视觉元素。例如，当我们想看清下图中的文字标签时，视线很难不被旁边鲜艳的色块吸引，因而受到干扰。

尤其当两种饱和度高，甚至互补的颜色放在一起的时候，会产生让人眼非常难受的“震颤”效应（Color Vibration），例如下图（辣眼睛预警！）：

著名的色彩理论家约瑟夫·阿尔伯斯（Josef Albers）也在他的经典著作《色彩的相互作用》中警告，配色中应避免使用震颤色：

“ 这种最初令人兴奋的效果也使我们的眼睛感觉负担很大，甚至不舒服。人们发现除了在广告中吸引眼球外，它很少被使用；因而它是令人不快，不受欢迎并且避之不及的（一种效果）。”

2
低对比度配色看瞎眼

配色的对比度过低时，图表的阅读会变得困难，特别是在光线不够的环境下。这对于文字尤为明显，不久前微信的暗黑模式就曾因不少用户觉得其文字颜色对比度过低，容易造成眼睛疲劳而引发讨论。

Datawrapper 给出的数据可视化配色建议中提到：文字（如标签、标注）越小，其与背景的对比就需要更高的可读性。较大的字体和背景之间的对比度应至少为2.5，小文本的对比度应至少为4。

文字对比度建议值一览表（来自 Datawrapper）

对于低视力（low vision）人群来说，低对比度配色无异于雪上加霜。在播客 PolicyViz 第169期中，嘉宾 Meagan Longoria 分享了提高可视化可访问性（accessibility）的五大方法，首要的就是：使用足够的色彩对比（sufficient color contrast）。她建议参考 WCAG 标准，比如文字的色彩对比度应该达到4.5至1，非文字部分应达到3至1，且最好不要只满足于下限。

3
色觉辨认障碍不友好配色

除了刚刚提到的为低视力人群考虑，当我们设计可视化配色的时候，要记住有好一部分读者可能有某种色觉辨认障碍（Color vision deficiency）。他们可能无法很好地分辨一些其他人看起来截然不同的颜色。

最常见的色觉辨认障碍是红绿色盲，此外还有蓝黄色盲和全色盲。大约有八分之一的男性和百分之一的女性会遇到这个问题。

一个红-绿对比配色因为红绿色盲变得难以分辨

好消息是，有一些专门为解决这个问题设计的配色可供选择，例如Color Brewer2（http://colorbrewer2.org/）的“色盲友好（colorblind safe）”模式；或者，我们也可以通过色觉辨认障碍模拟器（例如下图）来测试自己的配色是否“友好”。

VIZ PALETTE (https://projects.susielu.com/viz-palette) 界面图, 图中右侧显示了左侧配色的红色盲效果模拟

此外，一个好的设计师还会通过加入形状、位置等视觉元素来帮助减轻这些视觉缺陷带来的影响。这里就不得不提著名任务管理工具 Trello 对分类标签的贴心设计：

使用Color Oracle模拟下的 Trello 标签的色盲友好模式

4
一样还是不一样？

任何数值型数据的配色，无论是基于色相（hue）、亮度（value）还是饱和度（saturation），都有可能受到色彩的环境互动效应（interactive contextual effects）的影响。P.S. 后续的系列文章中，我们将带给大家更多关于这个效应的原理介绍~

这种感知层面的色彩变化虽然在日常生活中不太常见，但效果还是蛮惊人的。一方面，两个颜色一样的色块在不同的背景色下可能显得不一样：

两个中间小方块的实际颜色一样

另一方面，两个不同的色块也可能因为背景色的不同，而看起来一样：

下面的小方块分别表示上面的小方块的实际颜色

因此，如爱德华·塔夫特（Edward Tufte）在其著作《Envisioning Infomation》中建议的那样 —— 在表现复杂的数据时，最好不要仅仅依赖颜色的变化来传递某项信息。

5

披着羊皮的彩虹配色

彩虹配色在我们的日常生活中相当常见，甚至被一些可视化工具用作默认配色，实际上坑却出奇的多。

首先，这种配色通常被用于表现数值（连续型数据）的大小，但人们对于这些颜色代表的大小排序的感觉不尽相同。读者常常不得不一边默念颜色的名字，和对应的顺序，才能反应过来它表示的大小。
尽管我们从小在大自然和教科书中早已看过无数次彩虹，或许对它的顺序倒背如流，但我们的眼睛并不能自动感知“红橙黄绿蓝靛紫”的顺序。

你能一眼看出哪片区域的值最大，哪片区域的最小吗？

爱德华·塔夫特（Edward Tufte）在一本书中逗趣地评价道，这简直与法国诗人保尔·瓦雷里（Paul Valery）的名言 “所谓看见就是忘记所见事物的名称（To see is to forget the name of the thing one sees.）” 背道而驰。

彩虹配色不仅不能高效地传达数据，还容易引起误解，因为彩虹色变化并非均匀变化。比如，从下图中灰阶的转化，可以明显地看出部分颜色的变化速度比其他区域快得多，且不是单向加深/变浅的。

如此一来，彩虹配色容易把读者的视线吸引到特定的颜色，且颜色的变化程度与数值的变化程度并不总是对应的，不适合用于表示连续数据。

那么，彩虹配色是否适合用于表示分类数据呢？小编今天刚好看到一张（没错就是这么日常，称之为最火配色都毫不夸张），大家可以感受一下，是不是有一种熟悉的 闪 瞎 眼 的感觉？具体有什么弊端请自行往上翻翻复习一下~

最后，彩虹配色还踩了前面介绍过的另外一个坑，就是对色觉辨认障碍的人士相当不友好。

彩虹配色的各类色觉辨认障碍效果模拟（右边的三列分别是红色盲、绿色盲、蓝黄色盲）

6

反人类配色

这个坑涉及色彩心理学，色彩感知等等，内容比较广泛，这里不展开详细讨论，仅列举一些典型的例子供大家参考。

1. 用深色表示数值小，浅色表示数值大易让人困惑
   

不知道你们是否跟小编一样，第一眼看到下面这张图的时候，直觉以为对角线上的值最小，然后一看上面标注的数字（幸好还标了数字，但颜色基本就没帮上什么忙了），才反应过来看右边图例，确认了这里颜色浅表示数值大。

但即便知道了这一点，接下来去找较大和较小的值时，还是非常别扭，脑袋要多拐个弯才能反应过来，皆因配色与认知习惯不一致。

对特征相关性大小的可视化

使用渐变配色时，通常用浅色代表较低的值，而深色代表较高的值。不过这个原则主要针对的是白色等浅色背景下的可视化配色，在黑色等深色背景下不一定适用。

来自 Adobe

1. “绿&红” 配色容易被解读为“好&坏”
   

许多颜色在特定的文化中是有一定的语义的，例如通常红色代表“危险的/不好的”，而绿色代表“安全的/好的”；但可能基于所处的领域或文化习惯的不同而有例外（比如A股的“红涨绿跌”和美股的“绿涨红跌”），所以设计可视化时，我们要清楚目标用户的文化背景。

如果可视化配色表示的信息有违读者的认知，就分分钟可能误导读者，或增加其理解的难度。例如下图左侧的配色就让人十分蒙圈（分别用“红&绿”配色表示“好&坏”，“绿&蓝”配色表示“湖&森林”，“红&蓝”配色表示“男&女”）。

改善配色的语义一致性（来自 Datawrapper）

由于“绿&红” 配色容易被解读为“好&坏” ，我们最好不要它们用来表示与好坏无关的数据。以“男&女”为例，更符合大众语义习惯的配色方法是：用一个冷色（如蓝色或紫色）代表男性，用一个暖色代表女性（如黄色或橙色）。

“ 自然的、与语义一致的颜色被称为"语义共鸣色" (Semantically Resonant Color)，如果能有效利用语义共鸣色，我们能提高可视化的认知效率。 ”

--- 《一种基于语义共鸣色彩的数据可视化方法》

7
不一致的配色

这个坑有个比较常见的场景，就是数据看板（Dashboard），因为数据看板中经常出现同一个数据项（指标）出现在多个不同图表中，去展示不同指标之间的关系或同一指标的不同层次的情况。

此时，如果在不同图表中的同一个指标使用的颜色不同，则用户难以快速地辨识该指标，增加了理解看板内容的负担；

如果不同图表中的不同指标用了一样的颜色，例如下图的三个图表，中间和左边的颜色分别对应代表相同的国家，但跟右边的不同，容易让读者因为颜色所指代的数据项变了而感到懵逼，甚至造成误读。

紫色在中间和右边图表分别表示俄罗斯和法国

因此，应尽可能保持用色的一致性：例如，当你在柱状图中用橙色代表“收入”，则尽量在看板中所有表示“收入”的内容上都使用橙色。

配色一致性的正面示例

我们还可以结合前面介绍的语义不一致的问题来看，如果绿色和红色在一个图表中表示“好”和“坏”，则千万不要在数据看板（dashboard）上的其他图表中使用绿色和红色来表示其他内容。

例如，下图的列表中红色表示“被取消”（异常的），而在右上的饼图中表示“电子邮件”，则容易显得“电子邮件”是异常的。

某看板模板的配色正中以上两个坑

8
用顺序配色表现分类数据

虽然有时候出于整体设计的考虑，有的可视化图表会采用单色配色，但由于前面所提到的，人们自然的会将深色与“更多/较高”相关联，而将明亮的色彩与“较少/较低”相关联，因此这种（用单色渐变配色表现分类数据的）配色容易让读者认为分类间有排序关系。

例如下图中，右侧的顺序（sequential）配色会让人觉得苹果公司（Apple）最为突出/重要，传达了不应有的信息，造成对读者的误导。当然，如果的确是想要突出苹果公司，其他依次次之，则另当别论。

来自 AntV

关于如何为各种类型的数据项选择合适类型的配色，由于内容较多，将会在后续文章中另外展开介绍。

9
过多的颜色看花眼

对于分类数据，通常配色中需要的颜色数量应该等于类别的数量，但是不要忘记人脑的处理能力的局限性。使用的颜色太多时，人们往往会难以记起每个颜色分别表示的是什么，更有甚者，颜色可能会多得让人难以区分。

例如下面这个有点极端但真实的例子。。。

颜色多到令人头大 [捂脸]

或是这个更常见的例子：

“啊真棒...10种我必须在图表和图例之间来回比照才能分辨的颜色”（来自 viz.wtf）

Adobe 在其设计系统「Spectrum」针对配色中的颜色数量给出了如下建议：

“ 在分类数据的配色中，最好使用少于6种颜色。多于6种颜色时，配色就会开始变得难以理解，而超过12种时就会非常难以理解。如果需要6种以上的颜色，请尝试使用其他视觉编码，例如位置，这样可以（使图表）更容易阅读，且适应更多的数据。”

类别确实比较多的时候怎么办呢？有几种常见的解决方法（这里且不论饼图的其他坑）：

1. 重新考虑分组方式，使分组的数量降低到合理的范围内，例如从按国家分组改为按洲分组

2. 把占比较小的分组合并为“其他”组（下图来自 visage）
   

3. 根据 Adobe 的建议，转换成用位置区分不同的类别（将左侧饼图改为右侧柱状图）
   

0
多余的颜色（colorjunk）

最后这个坑看似明显，踩的人却也不少 —— 为了着色而着色，而没有明确的颜色用途。

例如下面这个图，每届选举都用不同的颜色表示，虽然视觉效果可能较为华丽，但颜色的使用并没有传达更多的数据信息，图表也并没有变得更易懂，反而会干扰读者。

美国总统选举 1976-2016

实际上，这里的颜色可以有更好更有意义的用法，例如用颜色表示总统候选人所在的不同党派（通常用蓝色表示民主党，红色表示共和党），从而增加一个维度的数据展示，便于比较不同党派候选人的表现。

当然，不是说给柱子加颜色就一定没有用，比如这两年很火的动态柱状图里面，如果只用文字标识柱子，在柱子快速移动的时候其实比较难看清文字；而这时候叠加使用颜色可作为一种区分效果的加强，方便读者追踪某个柱子的变化轨迹。

总结一下就是：

“ 色彩的运用应该是有目的的，清晰的，而且不应分散读者的注意力。”

--- Claus O. Wilke《数据可视化基础》

---

小结

本文一共介绍了可视化配色中我们可能遇到的十种坑：

视觉感知类

• 高饱和度配色闪瞎眼
  

• 低对比度配色看瞎眼
  

• 色觉辨认障碍不友好
  

• 一样还是不一样？
  

• 披着羊皮的彩红配色
  

• 反人类配色

设计原则

• 不一致的配色
  

• 用顺序配色表现分类数据
  

• 过多的颜色看花眼
  

• 多余的颜色（colorjunk）
  

值得说明的是，尽管本文已经尽可能在涵盖范围和通用性上做到最好，但也无法保证穷尽所有的坑，更多的是希望起到抛砖引玉的效果；

同时，以上讨论的坑并不是绝对的，根据应用场景的不同可能会有不一样的判断，例如文中提到的深色背景下，特殊设计目标下，或特定领域的配色习惯下等等。建议大家结合自己的设计场景和需要，灵活地进行处理。

---

后记

原本这篇文章的示例图，都是小编从各种可视化教程和书籍中选取的。没想到的是，自从跟配色的坑熟（gang）悉（shang）了，看哪哪都有坑，总能在日常生活和学习中，在各种领域的文章里，找到真实的案例加进来，最终形成了这篇 VisIt 史上最辣眼睛的文章。

我想这也说明了，配色真的是可视化设计中，未获得足够重视，且应被重视的一环。

因此，如果大家感兴趣，我们希望推出关于可视化配色的系列文章，介绍什么是好的配色，为什么好，以及怎么样设计出好的配色（包括避坑）等等。想看的话，记得转发、在看、收藏三连告诉我们哦！

| 本期互动 |

在可视化配色的路上你都踩过哪些坑呢？

欢迎在后台留言，与我们分享和探讨～

参考资料

书籍

• Envisioning Information

• Interaction of Color

• A Field Guide to Digital Color

文章

注：此清单由小编从参考的数十篇文章中精选得出，包含了较有参考意义或含有部分内容引用的文字，并非完整列表。

• Choosing colors for your data visualization (https://cambridge-intelligence.com/choosing-colors-for-your-data-visualization/)

• Why You Should Avoid Vibrating Color Combinations (https://webdesign.tutsplus.com/articles/why-you-should-avoid-vibrating-color-combinations--cms-25621)

• Color for data visualization (https://spectrum.adobe.com/page/color-for-data-visualization/)

• Common pitfalls of color use (https://serialmentor.com/dataviz/color-pitfalls.html)

• Data Visualization: Examples of the Good and the Bad (https://www.dummies.com/programming/big-data/big-data-visualization/data-visualization-examples-of-the-good-and-the-bad/)

• Why rainbow colors aren’t the best option for data visualizations (https://www.poynter.org/archive/2013/why-rainbow-colors-arent-always-the-best-options-for-data-visualizations/)

• Dear NASA: No More Rainbow Color Scales, Please (https://visual.ly/blog/rainbow-color-scales/"Dear NASA: No More Rainbow Color Scales, Please")

• AntV 设计原则 - 色板 (https://antv.vision/zh/docs/specification/principles/visual)

• Dashboard Design Mistake #5: Misuse of Colour (https://www.klipfolio.com/blog/dashboard-design-mistake-misuse-of-colour)

• What to consider when choosing colors for data visualization (https://blog.datawrapper.de/colors/)

• What makes a good data visualization – a Data Scientist perspective (https://www.kdnuggets.com/2017/03/what-makes-good-data-visualization.html)

• 使用颜色准确描述数据: 设计技巧、语义化与色盲友好设计 (https://zhuanlan.zhihu.com/p/102743681)

• 一种基于语义共鸣色彩的数据可视化方法 (https://patents.google.com/patent/CN106354838A/zh)

（本文图片来自网络）